<!--
 * @Descripttion:
 * @version:
 * @Author: cxguo
 * @Date: 2020-07-28 09:57:14
 * @LastEditors: cxguo
 * @LastEditTime: 2020-07-28 15:53:28
-->
<template>
  <div>
    <div v-for="(unitObj, index) in barcodeData" :key="index">
      <el-input
        v-model="unitObj.barcode"
        size="mini"

        class="paddingTb5"
        @blur="(e)=>{onInputBlur(e, index)}"
      >
        <span slot="prefix" class="el-input__icon">{{ unitObj.unitName }}</span>
      </el-input>
    </div>
  </div>
</template>

<script>

export default {
  components: { },
  props: {
    value: {
      type: Array,
      default: () => { return [] }
    },
    unitData: {
      type: Array,
      default: () => { return [] }
    }
  },
  data() {
    return {
      barcodeData: []
    }
  },
  computed: {

  },
  watch: {
    'unitData': {
      handler(data) {
        const unitData = data || []
        this.handleBarcodeData(unitData)
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    handleBarcodeData(unitData) {
      const data = unitData.map(item => {
        const obj = {}
        const { value, label } = item
        obj.unitId = value
        obj.unitName = label
        obj.barcode = ''
        return obj
      })
      this.barcodeData = data
    },
    onInputBlur(e, index) {
      this.$emit('input', this.barcodeData)
    }
  }
}
</script>

<style>

</style>
